// webpack的配置文件
// node 获取当前路径
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // plugin 需要被引入
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry:'./js/index.js',
  // entry: './public/index.html', // 入口文件，
  output: {
    publicPath: "./",
    filename: 'bundle.js', // 打包输出文件名字
    path: path.resolve(__dirname, 'dist') // 打包输出的目录文件名字
  },
  
 
  /*
    loader：主要用来将浏览器不能识别的文件，如sass,vue，编程浏览器可以识别的js,css,html的文件
  */
  module: {
    // 规则： 用来规定什么文件用那种loader来进行转换
    rules: [
      {
        test: /\.css$/, // 使用正则表达式来获取哪些文件适用那个loader
        /*
        1.使用什么loader来转换上面匹配的文件
        2.是倒叙的, .css 文件会先经过css-loader 的转换，然后再经过style-loader的转换
        */
        use: ['style-loader', 'css-loader'], // 
      }, {
        exclude: /\.(html|css|lesss|sass|scss|js)$/, // 排除这文件。其他问使用下面的file-loader 转换
        loader: 'file-loader' // 如果只使用一个loader ,可以直接写loader
      }
    ]
  },
  plugins: [
    // html-webpack-plugin： new  HtmlWebpackPlugin({})  默认会创建一个空的html文件，自动引入打包输出的所有资源（JS/CSS）.会自动创建一个.ejs文件
    // 需要有结构的HTML文件可以加一个template
    new HtmlWebpackPlugin({
      // 复制这个./src/index.html文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './public/index.html',
    }),
  ],
  mode:'development', // 开发模式
  // 开启一个本地服务器，可以用来热更新代码。开发调试的时候还可以用来解决浏览器跨域问题
  // 如果删除dist 就会启动不了
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    open:true, // 自动打开浏览器
    port: 9000 // 端口号
  }
};